$(function(){ 
  $.fn.addSvgClass = function(className) {
      return this.each(function() {
          var attr = $(this).attr('class')
          if (attr) {
              if (attr.indexOf(className) < 0) {
                  $(this).attr('class', attr + ' ' + className)
              }
          } else {
              $(this).attr('class', className)
          }
      })
  };

  $.fn.removeSvgClass = function(className) {
    return this.each(function() {
        var attr = $(this).attr('class')
        attr = attr.replace(' ' + className, '')
        $(this).attr('class', attr)
    })
  };

  var data = [
    {
      area:'东部',
      city:[
        {
          cityName:'江苏',
          currentData:67.5,
          potentialData:476,
          MtaH5:1011,
          textData:[
            '18-35岁占比76%',
            '大专以上人群占60%',
            '男女比例30：70',
            '掌上营业厅/抒情/j-pop/非主流/李宇春/爵士',
            '腾讯手机管家/微信/美图秀秀/QQ/花开花落等',
            '新婚',
            '婚恋/美容/房产/孕产育儿',
            '苏州/南京/无锡'
            
          ],
          textCase:2,
          partition:1
        },
        {
          cityName:'上海',
          currentData:10.08,
          potentialData:189,
          MtaH5:1012,

          textData:[
            '18-35岁占比81%',
            '大专以上人群占60%',
            '男女比例33：67',
            '流行音乐/非主流/自行车/j-pop/爵士',
            '腾讯手机管家/微信/美图秀秀/QQ/花开花落等',
            '新婚',
            '婚恋/房产/孕产育儿',
            '买房'
          ],
          textCase:1,
          partition:1
        },
        {
          cityName:'浙江',
          currentData:34,
          potentialData:455,
          MtaH5:1013,

          textData:[
            '25-30岁占比最高',
            '大专以上人群占54%',
            '男女比例31：69',
            '娱乐休闲/抒情/j-pop/旅游/餐饮美食',
            '杭州/宁波/温州/金华',
            '腾讯手机管家/微信/美图秀秀/QQ等',
            '新婚',
            '婚恋/房产/孕产育儿',
            '买房'
          ],
          textCase:3,
          partition:2
        },
        {
          cityName:'福建',
          currentData:29,
          potentialData:208,
          MtaH5:1014,

          textData:[
            '18-30岁占比77%',
            '大专以上人群占比62%',
            '男女比例26:74',
            '长沙/保定/贵阳/南昌/福建/温州',
            '福州/泉州/厦门',
            '腾讯手机管家/微信/QQ/花开花落等',
            '新婚',
            '婚恋/房产/孕产育儿',
            '买房'
          ],
          textCase:3,
          partition:2
        }
      ]
    },
    {
      area:'西部',
      city:[
        {
          cityName:'四川',
          currentData:68.9,
          potentialData:362,
          MtaH5:1021,

          textData:[
            '18-35岁占比63%',
            '大专以上人群占60%',
            '男女比例20：80',
            '爵士/于文文/j-pop/抒情/urban/流行音乐',
            '成都',
            '腾讯手机管家/微信/QQ/花开花落/美图秀秀等',
            '新婚',
            '婚恋/房产/孕产育儿/旅游/美容/求职招聘',
            '买房'
          ],
          textCase:3,
          partition:2
        },
        {
          cityName:'贵州',
          currentData:39,
          potentialData:194,
          MtaH5:1022,

          textData:[
            '18-24岁占比最高',
            '大专以上最多',
            '男女比例19：81',
            '旅游/餐饮美食/聚汇/礼品/音效/拼图/节奏大师',
            '腾讯手机管家/微信/QQ/花开花落/应用宝等',
            '新婚',
            '婚恋/美容/休闲娱乐',
            '贵阳/遵义/毕节'
          ],
          textCase:2,
          partition:1
        }
      ]
    },
    {
      area:'南部',
      city:[
        {
          cityName:'湖北',
          currentData:47,
          potentialData:240,
          MtaH5:1031,

          textData:[
            '25-30岁占比最高',
            '大专以上人群占比62%',
            '男女比例25：75',
            '旅游/娱乐休闲/抒情/非主流/爵士/自行车/J-POP',
            '腾讯手机管家/微信/QQ/花开花落/应用宝等',
            '新婚',
            '婚恋/美容/孕产育儿/房产',
            '武汉占比46%'
          ],
          textCase:2,
          partition:1
        },
        {
          cityName:'湖南',
          currentData:45.7,
          potentialData:240,
          MtaH5:1032,

          textData:[
            '25-30岁占比最高',
            '大专以上人群占比最高',
            '男女比例19：81',
            '旅游/大牌明星/爱情故事/芒果TV/urban',
            '腾讯手机管家/微信/QQ/花开花落/美图秀秀等',
            '新婚',
            '婚恋/美容/房产',
            '长沙占比30%'
          ],
          textCase:2,
          partition:1
        },
        {
          cityName:'广东',
          currentData:75.8,
          potentialData:854,
          MtaH5:1033,

          textData:[
            '18-30岁占比68%',
            '大专以上人群占比54%',
            '男女比例24：76',
            '拼图/美丽说/旅游/自行车/孕产育儿',
            '深圳/广州/东莞',
            '腾讯手机管家/微信/美图秀秀/QQ/花开花落等',
            '新婚',
            '婚恋/美容/服装鞋包箱包',
            '买房'
          ],
          textCase:3,
          partition:2
        }
      ]
    },
    {
      area:'北部',
      city:[
        {
          cityName:'北京',
          currentData:14.8,
          potentialData:187,
          MtaH5:1041,

          textData:[
            '18-35岁占比80%',
            '大专以上人群占69%',
            '男女比例29：71',
            '京东商城/自行车/单车/路程/滴滴/二手房',
            '腾讯手机管家/微信/QQ/花开花落/应用宝等',
            '新婚',
            '婚恋/房产/孕产育儿'
          ],
          textCase:0,
          partition:0
        },
        {
          cityName:'陕西',
          currentData:30,
          potentialData:188,
          MtaH5:1042,

          textData:[
            '25-30岁占比最高',
            '大专以上人群占66%',
            '男女比例25：75',
            '美丽说/娱乐休闲/连麦/旅游/林忆莲',
            '腾讯手机管家/微信/QQ/花开花落/美图秀秀等',
            '新婚',
            '婚恋/美容',
            '西安占比52%'
          ],
          textCase:2,
          partition:1
        },
        {
          cityName:'山东',
          currentData:62.6,
          potentialData:417,
          MtaH5:1043,

          textData:[
            '18-30岁占比61%',
            '大专以上人群占60%',
            '男女比例22：78',
            '贴纸/派派/娱乐休闲/新闻资讯/旅游',
            '腾讯手机管家/微信/QQ/花开花落/美图秀秀等',
            '新婚',
            '婚恋/房产/孕产育儿/美容',
            '济南/青岛/临沂'
          ],
          textCase:2,
          partition:1
        },
        {
          cityName:'河南',
          currentData:87,
          potentialData:446,
          MtaH5:1044,
          textData:[
            '18-30岁占比66%',
            '大专以上人群占比58%',
            '男女比例22:78',
            '贴纸/美丽说/娱乐休闲/李宇春/旅游/非主流/派派',
            '郑州/洛阳',
            '腾讯手机管家/微信/QQ/花开花落/应用宝等',
            '新婚',
            '婚恋/房产/美容/服装鞋帽箱包/家电/博彩',
            '买房'
          ],
          textCase:3,
          partition:2
        }
      ]
    }
  ]

  var data2 = [
    [
      '年龄<br>',
      '学历<br>',
      '性别<br>',
      '人群关键词<br>',
      'APP用户活跃度<br>',
      '婚恋状态<br>',
      '商业兴趣<br>'
    ],
    [
      '年龄<br>',
      '学历<br>',
      '性别<br>',
      '人群关键词<br>',
      'APP用户活跃度<br>',
      '婚恋状态<br>',
      '商业兴趣<br>',
      '资产状态<br>'
    ],
    [
      '年龄<br>',
      '学历<br>',
      '性别<br>',
      '人群关键词<br>',
      'APP用户活跃度<br>',
      '婚恋状态<br>',
      '商业兴趣<br>',
      '主要地域<br>'
    ],
    [
      '年龄<br>',
      '学历<br>',
      '性别<br>',
      '人群关键词<br>',
      '主要地域<br>',
      'APP用户活跃度<br>',
      '婚恋状态<br>',
      '商业兴趣<br>',
      '资产状态<br>'
    ]
  ]

  
  for(let i=0;i<data.length;i++){
    
    for(let j=0; j<data[i]['city'].length; j++){
      
      let p = data[i]['city'][j]['textCase']
      
      for(let k=0; k<data[i]['city'][j]['textData'].length; k++){
        data[i]['city'][j]['textData'][k] = data2[p][k] + data[i]['city'][j]['textData'][k];
        
      }

    }
  }




  var area = 0;
  var city = 0;
  var block = 0;

  back()
  dataChange()

  
  

  



  $('.areaBtn').click(function(){
    $('.areaBtn').removeClass('activeBtn');
    $(this).addClass('activeBtn');
    $('.mapBox img').removeClass('activeMap');
    $('.mapBox img').eq($(this).index()).addClass('activeMap');

    area = $(this).index();
    city = 0;
    block = 0;

    $('.border7Block .cls').removeSvgClass('activeCls')
    $('.border7Block .cls').eq(0).addSvgClass('activeCls')
    $('.border8Block .cls').removeSvgClass('activeCls')
    $('.border8Block .cls').eq(0).addSvgClass('activeCls')
    $('.border9Block .cls').removeSvgClass('activeCls')
    $('.border9Block .cls').eq(0).addSvgClass('activeCls')

    back()
    dataChange()

    
  })

  

  $('.border7Click .cls').click(function(){
    $('.border7Block .cls').removeSvgClass('activeCls')
    $('.border7Block .cls').eq($(this).index()).addSvgClass('activeCls')

    $('.centerBox').css({
      transform:'rotate(-'+(($(this).index()+1)*51.42-25.71-12.85)+'deg)'
    })
    block = $(this).index();
    dataChange()
  })

  $('.border8Click .cls').click(function(){
    $('.border8Block .cls').removeSvgClass('activeCls')
    $('.border8Block .cls').eq($(this).index()).addSvgClass('activeCls')
    $('.centerBox').css({
      transform:'rotate(-'+(($(this).index()+1)*45-22.5)+'deg)'
    })
    block = $(this).index();
    dataChange()
  })

  $('.border9Click .cls').click(function(){
    $('.border9Block .cls').removeSvgClass('activeCls')
    $('.border9Block .cls').eq($(this).index()).addSvgClass('activeCls')

    $('.centerBox').css({
      transform:'rotate(-'+((($(this).index()+1)*40)-10)+'deg)'
    })

    block = $(this).index();
    dataChange()
  })


  function dataChange(){
    $('.borderText').hide();
    $('.partition').hide();
    $('.borderText').eq(data[area]['city'][city]['textCase']).show()
    $('.partition').eq(data[area]['city'][city]['partition']).show()
    $('.rotaryText').html(data[area]['city'][city]['textData'][block])
    $('.currentData .DataText').html(data[area]['city'][city]['currentData'])
    $('.potentialData .DataText').html(data[area]['city'][city]['potentialData'])

    
    let str = '';
    for(let i=0; i<data[area]['city'].length;i++){
      
      str += '<p class="cityBtn" data-MtaH5="'+data[area]['city'][i]['MtaH5']+'">'+data[area]['city'][i]['cityName']+'</p>'

    }
    $('.cityList').html(str);
    $('.cityList .cityBtn').eq(city).addClass('activeBtn')


    


    $('.cityBtn').click(function(){
      console.log($(this).data().mtah5)
      MtaH5.clickStat($(this).data().mtah5)

      $('.cityBtn').removeClass('activeBtn');
      $(this).addClass('activeBtn');
      city = $(this).index();
      block = 0;

      $('.border7Block .cls').removeSvgClass('activeCls')
      $('.border7Block .cls').eq(0).addSvgClass('activeCls')
      $('.border8Block .cls').removeSvgClass('activeCls')
      $('.border8Block .cls').eq(0).addSvgClass('activeCls')
      $('.border9Block .cls').removeSvgClass('activeCls')
      $('.border9Block .cls').eq(0).addSvgClass('activeCls')

      back()

      dataChange()
    })

  }

  function back(){
    let n = data[area]['city'][city]['partition']
      if(n == 0){
        $('.centerBox').css({
          transform:'rotate(-12.86deg)'
        })
      }else if(n == 1){
        $('.centerBox').css({
          transform:'rotate(-22.5deg)'
        })
      }else{
        $('.centerBox').css({
          transform:'rotate(-30deg)'
        })
      }

  }


})


